<script type="text/javascript">
$(function(){
	var pg = App.soagov.nodeProp.ui
		, cvsEl, cvsCtx, flow, faces, _obj;
	
	pg.init = function(fo, fc, ce, cc){
		flow = fo;
		faces = fc || {};
		cvsEl = ce;
		cvsCtx = cc;
		pg.setProps(fo);
	}
	
	var frm = {
		width: pg.seek('width'),
		height: pg.seek('height'),
		caption: pg.seek('caption'),
		bgColor: pg.seek('bgColor'),
		code: pg.seek('code'),
		name: pg.seek('name'),
		ref: pg.seek('ref'),
		link: pg.seek('link'),
		mutex: pg.seek('mutex'),
		status: pg.seek('status'),
		memo: pg.seek('memo'),
		faceId: pg.seek('faceId'),
		faceCode: pg.seek('faceCode'),
		faceName: pg.seek('faceName'),
		implAdd: pg.seek('implAdd'),
		implPicker: pg.seek('implPicker'),
		pickFace: pg.seek('pickFace'),
		newFace: pg.seek('newFace'),
		pmMap: pg.seek('pmMap'), // 参数映射 parameters map
		impl: pg.seek('impl'), // 
		ppMap: pg.seek('ppMap'), // 实现类（Handler）的属性  properties map
		wrapper: pg.seek('wrapper'),
		wrapperAdd: pg.seek('wrapperAdd'),
		persister: pg.seek('persister'),
// 		ver: pg.seek('ver'),
		timeout: pg.seek('timeout'),
		way: pg.seek('way'),
		async: pg.seek('async'),
		exprCode: pg.seek('exprCode'),
		exprName: pg.seek('exprName'),
		uiCode: pg.seek('uiCode'),
		uiName: pg.seek('uiName'),
		yes: pg.seek('yes'),
		tagCode: pg.seek('tagCode'),
		tagName: pg.seek('tagName'),
		revCode: pg.seek('revCode'),
		revType: pg.seek('revType'),
		entry: pg.seek('entry'),
		detach: pg.seek('detach'),
		saveAs: pg.seek('saveAs')
	};
	
	function toggle() {
		var f = ['code','name','ref','mutex','memo','faceCode','impl','wrapper',
		         'persister', 'timeout','exprCode','exprName','uiCode','uiName',
		         'revCode', 'status', 'entry'];
		if (_obj.o && _obj.t != 'subflow') {
			pg.find('.faceBar').hide();
			pg.find('.implBar').hide();
			pg.find('.wrapperBar').hide();
			//frm.newFace.parent().hide();
			pg.seek('graphPp').next().addClass('locked');
			pg.seek('basicPp').next().addClass('locked');
			pg.seek('facePp').next().addClass('locked');
			for (var i in f) {
				frm[f[i]].attr('readOnly', 1);
			}
			frm.detach.show();
			frm.saveAs.hide();
		} else {
			pg.find('.faceBar').show();
			pg.find('.implBar').show();
			pg.find('.wrapperBar').show();
			pg.find('.subform').removeClass('locked');
			for (var i in f) {
				frm[f[i]].removeAttr('readOnly');
			}
			frm.detach.hide();
			frm.saveAs.show();
		}
	}
	
	var implGd = $('<div class="grid"></div>').mac('grid', {
		key: 'id',
		cols : [{
			field: 'impl', width: 320,
			title: '已知实现类'
		}, {
			field: 'ver', title : '版本', width: 120
		}],
		loader: {
			url: App.ctx + '/face/impl/list.do',
			params: { pageNo: 1, pageSize: 50 },
			autoLoad: false
		},
		pagerLength: 10
	});
	frm.impl.mac('combo', {
		keyField: 'impl',
		displayField: 'impl',
		multiSelect: false,
		allowInput: true,
		width: 232,
		boxLeft: -268,
		boxWidth: 500,
		boxHeight: 320,
		boxEl: implGd,
		onSelect: function(me, sk, sd){
			var r = sd[0] || {};
			_obj.d.impl = r.impl;
		}
	});
	frm.impl.mac('combo_grid', {});

	frm.implAdd.click(function(){
		var faceId = frm.faceId.val();
		if (!faceId) {
			mac.alert('请先选择一个接口');
			return;
		}
		App.open({
			ctx: 'soagov',
			action: 'faceImplEdit',
			title: '为接口添加实现类',
			model:true,
			params: {
				faceId: faceId,
				faceName: frm.faceName.text()
			}
		}, $.noop, function(){
			implGd.load();
		});
	});
	
	
	frm.implPicker.click(function(){
		var faceId = frm.faceId.val();
		if (!faceId) {
			mac.alert('请先选择一个接口');
			return;
		}
		App.open({
			ctx: 'soagov',
			action: 'faceImplPicker',
			title: '管理实现类',
			model:true,
			params: {
				faceId: faceId,
				faceName: frm.faceName.text()
			}
		}, $.noop, function(){
			implGd.load();
		});
	});
	
	// wrapper is one of impl
	var wrapperGd = $('<div class="grid"></div>').mac('grid', {
		key: 'id',
		cols : [{
			field: 'impl', width: 320,
			title: '已知实现类'
		}, {
			field: 'ver', title : '版本', width: 120
		}],
		loader: {
			url: App.ctx + '/face/impl/list.do',
			params: { pageNo: 1, pageSize: 50, faceId: '8a908a24607c520701609c03aacc0004' },
			autoLoad: true
		},
		pagerLength: 10
	});
	frm.wrapper.mac('combo', {
		keyField: 'impl',
		displayField: 'impl',
		multiSelect: false,
		allowInput: true,
		width: 232,
		boxLeft: -268,
		boxWidth: 500,
		boxHeight: 320,
		boxEl: wrapperGd,
		onSelect: function(me, sk, sd){
			var r = sd[0] || {};
			_obj.d.wrapper = r.impl;
		}
	});
	frm.wrapper.mac('combo_grid', {});

	frm.wrapperAdd.click(function(){
		App.open({
			ctx: 'soagov',
			action: 'faceImplEdit',
			title: '添加包装器',
			params: {
				faceId: '8a908a24607c520701609c03aacc0004',
				faceName: 'WrapHandler'
			}
		}, $.noop, function(){
			wrapperGd.load();
		});
	});

	var faceGd = $('<div class="grid"></div>').mac('grid', {
		key: 'id',
		cols : [{
			field: 'code', title : '接口英文名', width: 140,
			render: function(r){
				return $('<span class="a"></span>').click(function(){
					App.open({
						ctx: 'soagov',
						action: 'faceView',
						params: { id: r.id }
					});
				}).append(r.code);
			}
		},{
			field: 'name', title : '接口中文名', width: 240
		},{
			field: 'ver', title : '版本', width: 80
		}],
		loader: {
			url: App.ctx + '/face/list.do',
			params: { pageNo: 1, pageSize: 50 },
			autoLoad: true
		},
		pagerLength: 10
	});
	frm.faceCode.mac('combo', {
		keyField: 'id',
		displayField: 'code',
		multiSelect: false,
		width: 232,
		boxLeft: -268,
		boxWidth: 500,
		boxHeight: 320,
		boxEl: faceGd,
		onSelect: function(me, sk, sd){
			var r = sd[0] || {};
			_obj.d.faceId = r.id;
			frm.faceName.text(r.name ? (r.name + ' ' + r.ver) : '');
			frm.faceId.val(r.id);
			frm.faceCode.val(r.id, r.code);
			if (r) {
				faces = faces || {};
				faces[r.id] = r;
				implGd.load({ faceId: r.id });
			}
		}
	});
	frm.faceCode.mac('combo_grid', {});
	frm.faceName.click(function(){
		var f = faces[_obj.d.faceId];
		App.open({
			ctx: 'soagov',
			action: 'faceView',
			title: f.name + ' 接口定义',
			params: { id: _obj.d.faceId }
		});
	});
	frm.newFace.click(function(){
		//TODO 新建接口的快捷方式
		App.open({
			ctx: 'soagov',
			action: 'faceEdit',
			title: '新建一个接口',
			modal: true
		}, function(d){
			if (d.key == _obj.d.faceId) {
				return;
			}
			_obj.d.faceId = d.key;
			frm.faceId.val(d.key);
			frm.faceCode.val(d.id, d.code);
			frm.faceName.text(d.title).click(function(){
				App.open({
					ctx: 'soagov',
					action: 'faceView',
					params: { id: d.key }
				});
			});
		});
	});
	frm.pickFace.click(function(){
		App.open({
			ctx: 'base',
			action: 'dirPicker',
			title: '选择一个接口',
			ctx: 'base',
			allow: [ C.FACE ],
			model: true
		}, function(d){
			if (d.key == _obj.d.faceId) {
				return;
			}
			_obj.d.faceId = d.key;
			frm.faceId.val(d.key);
			frm.faceCode.val(d.id, d.code);
			faces = faces || {};
			faces[d.key] = d;
			
			//alert(JSON.stringify(faces));
			frm.faceName.text(d.title).click(function(){
				App.open({
					ctx: 'soagov',
					action: 'faceView',
					params: { id: d.key }
				});
			});
		});
	});
	
	frm.pmMap.click(function(){
		App.open({
			ctx: 'soagov',
			action: 'nodePmap',
			title: '参数映射',
			closeOnEsc: 1,
			params: {
				faceId: '8a908a24607c520701609c03aacc0004',
				data: _obj.d.pm || {} 
			}
		}, function(d) {
			_obj.d.pm = d;
		});
	});
	frm.ppMap.click(function(){
		App.open({
			ctx: 'soagov',
			action: 'nodePmap',
			title: '属性配置',
			closeOnEsc: 1,
			params: {
				data: _obj.d.pp || {} 
			}
		}, function(d) {
			_obj.d.pp = d;
		});
	});
	
	frm.revType.mac('combo', {
		width: 232,
		boxWidth: 232,
		boxLeft: 88,
		data: Cache.soagov.flow.revType,
		onSelect: function(me, sk, sd){
			_obj.d.revType = sk[0];
		}
	});

	pg.togglePl = function(n, s) {
		var t = pg.seek(n), b = t.next();
		if (s) {
			t.show();
			if (t.hasClass('open')) {
				b.show();
			} else {
				//t.click();
			}
		} else {
			t.hide();
			b.hide();
		}
	}
	
	function showStatus() {
		frm.status.parent().show();
		frm.status.removeAttr('readonly');
		if (_obj.c) {
			if (_obj.c.status) {
				frm.status.prop("checked", true);
				return;
			}
		} else {
			_obj.c = { status: 0 };
		}
		frm.status.removeAttr('checked');
	}
	
	function showVal(n, v) {
		n.parent().show();
		n.val(v);
	}
	
	pg.setProps = function(n){
		var cf = pg.find(':focus');
		if (cf.change) {
			cf.change();
		}
		_obj = n;
		var d = n.d, m = n.m, o = n.o, t = n.t;

		toggle();

		pg.togglePl('graphPp', 0);
		pg.togglePl('basicPp', 0);
		pg.togglePl('advPp',0);
		pg.togglePl('facePp', 0);
		$.each(frm, function(i, n){
			if (n.parent) {
				n.parent().hide();
			}
		});
		
		if (t == 'arrow') {
			pg.togglePl('basicPp', 1);
			switch (n.p.t) {
			case 'judge':
				frm.yes.parent().show();
				frm.yes.prop('checked', d.tagCode == 'yes');
				break;
			case 'switch':
				frm.tagCode.parent().show();
				showVal(frm.tagCode, d.tagCode);
// 				showVal(frm.tagName, d.tagName);
				break;
			}
// 			showVal(frm.timeout, d.timeout);
// 			showVal(frm.way, d.way);
// 			frm.async.parent().show();
// 			if (d.async) {
// 				frm.async.prop("checked", true);
// 			} else {
// 				frm.async.removeAttr('checked');
// 			}
			return;
		}
		
		pg.togglePl('graphPp', 1);
		showVal(frm.width, m.w);
		showVal(frm.height, m.h);
		showVal(frm.caption, m.caption);
		
		if (t == 'start' || t == 'end') {
			return;
		}
		pg.togglePl('basicPp', 1);
		
		//pg.togglePl('basicPp', 1);
		showVal(frm.code, d.code);
		showVal(frm.name, d.name);
		showVal(frm.memo, d.memo);

		if (t == 'commitTx' || t == 'yrt') {
			return;
		}

		pg.togglePl('facePp', 1);
		frm.pickFace.parent().show();
		frm.faceCode.parent().show();
		frm.faceName.parent().show();
		frm.faceId.val(d.faceId);
		if (d.faceId) {
			var f = faces[d.faceId];
			frm.faceCode.val(f.id, f.code);
			frm.faceName.text(f? f.name:'');
		} else {
			frm.faceCode.val([], '');
			frm.faceName.text('');
		}
		frm.pmMap.parent().show();
		frm.implAdd.parent().show();
		showVal(frm.impl, d.impl);
		frm.ppMap.parent().show();
// 		showVal(frm.ver, d.ver);
		
		if (t == 'process' || t == 'judge' || t == 'input' || t == 'output') {
			pg.children('.bottom').show();
			if (o) {
				frm.detach.show();
			} else {
				frm.saveAs.show();
			}
		}
		
		showVal(frm.revCode, d.revCode);
		
		// 以下节点支持wrapper
		if (t == 'process' || t == 'judge' || t == 'subflow' ||
				t == 'switch' || t == 'join') {
			frm.wrapperAdd.parent().show();
			showVal(frm.wrapper, d.wrapper);
		}

		switch(t) {
		case 'process':
			showStatus();
			pg.togglePl('advPp', 1);
			showVal(frm.entry, d.entry);
			break;
		case 'input':
		case 'output':
			frm.uiCode.parent().show();
			frm.uiCode.val(d.uiCode);
			frm.uiName.parent().show();
			frm.uiName.val(d.uiName);
			break;
		case 'judge':
		case 'switch':
			showStatus();
			frm.exprCode.parent().show();
			frm.exprCode.val(d.exprCode);
			frm.exprName.parent().show();
			frm.exprName.val(d.exprName);
			break;
		case 'beginTx':
			break;
		case 'fork':
			frm.timeout.parent().show();
			frm.timeout.val(d.timeout);
			break;
		case 'subflow':
			if (n.id == App.getHashParam('id')){
				frm.mutex.parent().show();
				if (d.mutex) {
					frm.mutex.prop("checked", true);
				} else {
					frm.mutex.removeAttr('checked');
				}
				showVal(frm.revType, d.revType);
				showVal(frm.timeout, d.timeout);
				pg.togglePl('advPp', 1);
				showVal(frm.persister, d.persister);
			} else {
				showStatus();
			}
			if (n.p) {
				pg.togglePl('facePp', 0);
				showVal(frm.ref, d.ref);
				if (o) {
					frm.ref.attr('readOnly', true);
					frm.link.parent().show();
					frm.link.attr('href', '#flow/edit?catalog=svc&id=' + o);
				} else {
					frm.ref.removeAttr('readOnly');
				}
				frm.wrapperAdd.parent().show();
				showVal(frm.wrapper, d.wrapper);
			} else {
				pg.togglePl('facePp', 1);
			}
			pg.togglePl('advPp', 1);
			break;
		}
	}

	function changeProp(e, me){
		var n = _obj, me = me || $(this), k = me.attr('name')
			t = n.t, o = n.o, d = n.d, m = n.m, c = n.c;
		if ((!n || (t != 'subflow' && o)) && k != 'status') {
			return 0;
		}
		switch (k) {
		case 'width':
			m.w = me.val() * 1;
			if (t == 'subflow') {
				cvsEl.width = m.w;
			}
			flow.draw(cvsCtx);
			break;
		case 'height':
			m.h = me.val() * 1;
			if (t == 'subflow') {
				cvsEl.height = m.h;
			}
			flow.draw(cvsCtx);
			break;
		case 'yes':
			d.tagCode = me.prop('checked')? 'yes':'no';
			break;
		case 'async':
			d.async = me.prop('checked')? 1:0;
			break;
		case 'mutex':
			d.mutex = me.prop('checked')? 1:0;
			break;
		case 'status':
			c.status = me.prop('checked')? 1:0;
			break;
		default:
			d[k] = me.val();
			break;
		}
		flow.draw(cvsCtx);
		return 1;
	}
	function valid(p){
		pg.find('.msg').html('');
		return true;
	}
	
	pg.find('.title').click(function(){
		var me = $(this), x = me.children('.icon');
		me.toggleClass('open');
		x.toggleClass('icon-minus').toggleClass('icon-plus');
		me.next().toggle(me.hasClass('open'));
	});
	
	frm.caption.change(function(){
		if (_obj && _obj.setCaption) {
			var c = $(this).val();
			//frm._caption.show().text(c);
			//var r = frm._caption[0].getBoundingClientRect();
			//_obj.setCaption(c, r.right - r.left);
			//frm._caption.hide();
			_obj.setCaption(c, cvsCtx.measureText(c).width);
			flow.draw(cvsCtx);
		}
	});
	
	frm.width.change(changeProp);
	frm.height.change(changeProp);
	frm.code.change(changeProp);
	frm.name.change(changeProp);
	frm.ref.change(changeProp);
	frm.status.change(changeProp);
	frm.timeout.change(changeProp);
	frm.memo.change(changeProp);
	frm.faceCode.change(changeProp);
	frm.impl.change(function(e){
		changeProp(e, frm.impl);
	});
	frm.wrapper.change(function(e){
		changeProp(e, frm.wrapper);
	});
	frm.persister.change(changeProp);
// 	frm.ver.change(changeProp);
	frm.timeout.change(changeProp);
	frm.way.change(changeProp);
	frm.async.change(changeProp);
	frm.exprCode.change(changeProp);
	frm.exprName.change(changeProp);
	frm.yes.change(changeProp);
	frm.uiCode.change(changeProp);
	frm.uiName.change(changeProp);
	frm.tagCode.change(changeProp);
	frm.tagName.change(changeProp);
	frm.revCode.change(changeProp);
	frm.entry.change(changeProp);
	frm.mutex.change(changeProp);
	
	frm.detach.click(function(){
		if (!confirm('确定要将此组件转换为普通节点吗？')) {
			return;
		}
		delete _obj.o;
		toggle();
	});
	frm.saveAs.click(function(){
		App.open({
			ctx: 'soagov',
			action: 'comPicker',
			title: '新建组件覆盖现有组件',
			model: true
		}, function(d){
			var d = d.length? d[0] : { code: '', id: '' };
			mac.confirm('确定' + (d.id?('覆盖'+d.code):'另存为新')
					+ '组件吗？', function(){
				var a = _obj.tinto();
				$.post(App.ctx + '/com/save.do', {
					id: d? d.id: '',
					code: a.d.code,
					name: a.d.name,
					type: a.t,
					memo: a.memo,
					faceId: a.d.faceId,
					impl: a.d.impl,
					wrapper: a.d.wrapper,
					persister: a.d.persister,
					ver: a.d.ver,
					json: JSON.stringify(a)
				}, function(rs){
					var ro = mac.eval(rs);
					if (ro.success) {
						_obj.o = ro.data.id;
						toggle();
						pg.callback(ro.data);
					}else{
						mac.alert(ro.data, ro.params);
					}
				});
			});
		});
	});
});
</script>
<div name="graphPp" class="title open">
	<span class="icon icon-minus"></span>图形属性
</div>
<div class="subform">
	<div class="item">
		<span class="label">宽度</span> <input type="text" name="width" />
		<div class="clear"></div>
	</div>
	<div class="item">
		<span class="label">高度</span> <input type="text" name="height" />
		<div class="clear"></div>
	</div>
	<div class="item">
		<span class="label">文字</span> <input type="text" name="caption"
			maxlength="64" />
		<div class="clear"></div>
	</div>
	<div class="item hidden">
		<span class="label">背景色</span> <input type="text" name="bgColor" />
		<div class="clear"></div>
	</div>
	<div class="clear"></div>
</div>
<div name="basicPp" class="title">
	<span class="icon icon-plus"></span>基础属性
</div>
<div class="subform hidden">
	<div class="item">
		<span class="label">编号</span> <input type="text" name="code" />
		<div class="clear"></div>
	</div>
	<div class="item">
		<span class="label">名称</span> <input type="text" name="name" />
		<div class="clear"></div>
	</div>
	<div class="item">
		<span class="label">引用自</span> <input type="text" name="ref" />
		<div class="clear"></div>
	</div>
	<div class="item">
		<span class="label">链接</span>
		<a class="value a" name="link" target="_blank">转到子流程</a>
		<div class="clear"></div>
	</div>
	<div class="item hidden">
		<span class="label">禁用</span> <input type="checkbox" name="status" 
			style='width: 0px;' />
		<div class="clear"></div>
	</div>
	<div class="item hidden">
		<span class="label">互斥</span> <input type="checkbox" name="mutex"
			style='width: 0px;' />
		<div class="clear"></div>
	</div>
	<div class="item hidden">
		<span class="label">表达式</span> <input type="text" name="exprCode" />
		<div class="clear"></div>
	</div>
	<div class="item hidden">
		<span class="label">判定条件</span> <input type="text" name="exprName" />
		<div class="clear"></div>
	</div>
	<div class="item hidden">
		<span class="label">YES?</span> <input type="checkbox" name="yes" />
		<div class="clear"></div>
	</div>
	<div class="item hidden">
		<span class="label">分支编号</span> <input type="text" name="tagCode" />
		<div class="clear"></div>
	</div>
	<div class="item hidden">
		<span class="label">分支名称</span> <input type="text" name="tagName" />
		<div class="clear"></div>
	</div>
	<div class="item">
		<span class="label">协议</span> <input type="text" name="way" />
		<div class="clear"></div>
	</div>
	<div class="item">
		<span class="label">异步</span> <input type="checkbox" name="async" />
		<div class="clear"></div>
	</div>
	<div class="item">
		<span class="label">超时</span> <input type="text" name="timeout" />
		<div class="clear"></div>
	</div>
	<div class="item hidden">
		<span class="label">界面编号</span> <input type="text" name="uiCode" />
		<div class="clear"></div>
	</div>
	<div class="item hidden">
		<span class="label">界面名称</span> <input type="text" name="uiName" />
		<div class="clear"></div>
	</div>
	<div class="item">
		<span class="label">备注</span>
		<textarea name="memo"></textarea>
		<div class="clear"></div>
	</div>
	<div class="clear"></div>
</div>
<div class="clear"></div>
<div name="facePp" class="title">
	<span class="icon icon-plus"></span>接口配置
</div>
<div class="subform hidden" name="facePl">
	<div class="item faceBar">
		<div class="label">&nbsp;</div>
		<div class="value">
<!-- 			<span class="a hidden" name="newFace">新的接口</span>&nbsp;|&nbsp; -->
			<span class="a" name="pickFace">选择接口</span>
		</div>
		<div class="clear"></div>
	</div>
	<div class="item">
		<div class="label">接口编号</div>
		<div class="combo fl" name="faceCode"></div>
		<input type="hidden" name="faceId" class="faceId" />
		<div class="clear"></div>
	</div>
	<div class="item">
		<div class="label">接口名称</div>
		<span class="value a" name="faceName"></span>
		<div class="clear"></div>
	</div>
	<div class="item implBar">
		<div class="label">&nbsp;</div>
		<div class="value">
			<span class="a" name="implAdd">添加实现类</span>
			<span class="a" name="implPicker">实现类管理</span>
		</div>
		<div class="clear"></div>
	</div>
	<div class="item hidden">
		<span class="label">实现</span>
		<div class="combo fl" name="impl"></div>
		<div class="clear"></div>
	</div>
	<div class="item hidden">
		<span class="label">入口</span>
		<input type="text" name="entry" />
		<div class="clear"></div>
	</div>
<!-- 	<div class="item"> -->
<!-- 		<span class="label">版本</span> -->
<!-- 		<input type="text" name="ver" /> -->
<!-- 		<div class="clear"></div> -->
<!-- 	</div> -->
	<div class="item">
		<div class="label">&nbsp;</div>
		<span class="value a" name="ppMap">属性配置</span>
		<div class="clear"></div>
	</div>
	<div class="clear"></div>
</div>
<div class="clear"></div>
<div name="advPp" class="title">
	<span class="icon icon-plus"></span>高级属性
</div>
<div class="subform hidden">
	<div class="item wrapperBar">
		<div class="label">&nbsp;</div>
		<div class="value">
			<span class="a" name="wrapperAdd">添加包装器</span>
		</div>
		<div class="clear"></div>
	</div>
	<div class="item hidden">
		<span class="label">包装器</span>
		<div class="combo fl" name="wrapper"></div>
		<div class="clear"></div>
	</div>
	<div class="item">
		<div class="label">&nbsp;</div>
		<span class="value a" name="pmMap">参数映射</span>
		<div class="clear"></div>
	</div>
	<div class="item hidden">
		<span class="label">反交易类型</span>
		<div class="combo" name="revType"></div>
		<div class="clear"></div>
	</div>
	<div class="item hidden">
		<span class="label">反交易</span>
		<input type="text" name="revCode" />
		<div class="clear"></div>
	</div>
	<div class="item hidden">
		<span class="label">持久化器</span>
		<input type="text" name="persister" />
		<div class="clear"></div>
	</div>
	<div class="clear"></div>
</div>
<div class="clear"></div>
<br />
<div class="bottom">
	<button name="detach">转换为节点</button>
	<button name="saveAs">另存为组件</button>
</div>
<br />
